<template>
    <div>
        <el-header style="display: flex;font-size: 16px;" height="45px">
            <el-button style="margin-top: 6px; font-size: medium;" type="text" @click="changePage('/')">返回主页面</el-button>
            <div v-if="loginCheck != null" class="toolbar">
                <div class="block" style="margin-right: 10px;">
                    <el-avatar :size="40" :src="imageUrl" style="margin-top:10px" />
                </div>
                <span>{{ userInfo.realName }}</span>
                <el-dropdown trigger="click">
                    <el-icon style="margin-left: 18px; margin-top: 1px;color: #303133;">
                        <setting />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="toUserInfo">个人资料</el-dropdown-item>
                            <el-dropdown-item @click="toAllOrder">查看订单</el-dropdown-item>
                            <el-dropdown-item @click="toLogout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div v-else class="toolbar">
                <el-button style="margin-top: 6px;" type="text" @click="changePage('/login')">登录</el-button>
                <el-button style="margin-top: 6px;" type="text" @click="changePage('/register')">注册</el-button>
            </div>
        </el-header>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, defineEmits } from 'vue'
import { logout, me } from '@/api';
import { ElMessage } from 'element-plus';
import router from '@/router';

let userInfo = reactive({
    realName: '',
    img: '',
    id: ''
})
const baseURL = ref('http://localhost:8081/common')
const imageUrl = ref('') // 用来存储图片URL
let loginCheck = localStorage.getItem("token")
// 获取父组件自定义的事件
const emit = defineEmits(['changePage'])
const changePage = (newURL: any) => {
    router.push(newURL);
};

onMounted(() => {
    me().then((resp: { data: any }) => {
        let data = resp.data;
        if (data.code == '50041') {
            let user = data.data;
            userInfo.realName = user.realName;
            userInfo.img = user.img;
            userInfo.id = user.id
            imageUrl.value = baseURL.value +`/download?name=${user.img}`;
        }
    })
})

// 登出按钮
const toLogout = () => {
    logout().then((resp: { data: any }) => {
        localStorage.removeItem('token');
        let data = resp.data;
        ElMessage({
            message: data.message,
            type: 'success'
        })
        setTimeout(() => {
            window.location.reload();
        }, 1000);
    })
}

// 查看所有订单按钮
const toAllOrder = () => {
    router.push('/allOrder/' + userInfo.id )
}

const toUserInfo = () => {
    router.push('/userInfo/' + userInfo.id )
}

</script>

<style scoped>

.toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
    text-align: right;
    margin-left: auto;
}

.el-dropdown-menu__item {
    width: 120px;
}

.icon-color {
    color: white;
}
</style>
